<template>
    <div>
        <div class="addBtn">
            <el-button type="primary" @click="handleButtonAdd(1)">+ 添加</el-button>
            <el-dialog title="添加直播权限" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="选择专家" prop="title">
                <div style="display: flex;align-items: center">
                <el-select style="margin: 0 10px ;" v-model="inputName" placeholder="选择专家" @change="handleChange">
                    <el-option v-for="item in platformList" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
          </el-form-item>
          <!-- <el-form-item label="选择赛事" prop="title">
                <div style="display: flex;align-items: center">
                <el-select style="margin: 0 10px ;" v-model="matchName" placeholder="选择赛事" @change="changeMatch" value-key="match_id">
                    <el-option v-for="item in matchData" :key="item.match_id" :label="item.matches.home_team_name+' vs '+item.matches.away_team_name" :value="item">
                    </el-option>
                </el-select>
            </div>
          </el-form-item> -->


          <!-- <el-form-item label="名称" prop="title">
            <el-input v-model="titleName"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload v-if="dialogImageUrl==''" action="https://api.zctj16888.com/admin/v1/image/ossUpload" list-type="picture-card"
              :on-preview="handlePictureCardPreview" :on-success="handleAvatarSuccess" name="image" >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div v-else>
                <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
                <i class="el-icon-delete" @click="deleteImg"></i>
              </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item> -->
        </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="id" align="center">
            </el-table-column>
            <el-table-column prop="author_name" label="名称" align="center">
            </el-table-column>
            <el-table-column label="是否正在直播" align="center">
                <template #default="{row}">
                    <div>
                        <el-button v-if="row.status==1" type="primary">是</el-button>
                        <el-button v-if="row.status==2" type="info">否</el-button>
                        <el-button v-if="row.status==null" type="warning">未知</el-button>
                    </div>
                </template>
                <!-- <template  #default="{ row }">
                    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <el-radio-group v-model="row.status"  @change="handleRadioChange(row)">
                            <el-radio :label="1">否</el-radio>
                            <el-radio :label="2">是</el-radio>
                        </el-radio-group>
                    </div>
                </template> -->
            </el-table-column>
            <el-table-column prop="" label="取消权限" align="center">
                <template #default="{row}">
                    <div>
                        <el-button type="danger" @click="cancaelTap(row)">取消</el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="" label="关闭直播" align="center">
                <template #default="{row}">
                    <div>
                        <el-button type="success" @click="closeTap(row)">关闭</el-button>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="" label="创建聊天室" align="center">
                <template #default="{row}">
                    <div>
                        <el-button type="success" @click="createChat(row)">创建</el-button>
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column prop="" label="开始直播" align="center">
                <template #default="{row}">
                    <div>
                        <el-button type="success" @click="changeTap(row)">开播</el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="查看直播记录" align="center">
                <template #default="{row}">
                    <div>
                        <el-button type="primary" @click="clickHis(row)">查看历史直播记录</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="开始直播" :visible.sync="changDialog">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="选择赛事" prop="title">
                <div style="display: flex;align-items: center">
                <el-select style="margin: 0 10px ;" v-model="matchName" placeholder="选择赛事" @change="changeMatch" value-key="match_id">
                    <el-option v-for="item in matchData" :key="item.match_id" :label="item.matches.home_team_name+' vs '+item.matches.away_team_name" :value="item">
                    </el-option>
                </el-select>
            </div>
          </el-form-item>
        </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete1">取消</el-button>
                    <el-button type="primary" @click="clickConfirm1">确认</el-button>
                </div>
            </el-dialog>

        <el-dialog title="历史直播记录" :visible.sync="hisTrue">
        <el-table :data="userData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="StreamName" label="流名称" align="center">
            </el-table-column>
            <el-table-column prop="AppName" label="应用名称" align="center">
            </el-table-column>
            <el-table-column prop="StreamStartTime" label="直播开始时间" align="center">
            </el-table-column>
            <el-table-column prop="StreamEndTime" label="直播结束时间" align="center">
            </el-table-column>
            <el-table-column prop="StopReason" label="断流原因" align="center">
            </el-table-column>
            <el-table-column prop="max_user" label="最多用户数量" align="center">
            </el-table-column>
            <el-table-column prop="average_time" label="平局浏览时长" align="center">
            </el-table-column>
        </el-table>
        </el-dialog>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
const socket = new WebSocket('ws://43.138.255.245:8081');
import { getLiverList,addLive,cancelLive,expertList,userList,historyLive,closeLive,changSave,startLive,matchesLiveList } from '../../../libs/api'
export default {
    data() {
        return {
            tableData:[],
            dialogTableVisible: false,
            platformList:[],
            ruleForm: {},
            values:'',
            status:'',
            zid:'',
            phoneNumber:'',
            tableUser:[],
            currentPage: 1,
            PageSize: 10,
            hisTrue:false,
            userData:[],
            typeStatus:'',
            dialogVisible: false,
            dialogImageUrl: '',
            titleName:'',
            changDialog:false,
            changeID:'',
            aName:'',
            inputName:'',
            matchData:[],
            matchName:{},
            k_id:'',
            roomId:'',
            totalCount: 1,
            pageSizes: [5, 10],
        }
    },
    created() {
        socket.onopen = function() {
        console.log("Connected to server");
    };
        this.liverData()
        this.getExpertList()
        this.getMatchList()
    },
    methods: {
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
            this.liverData()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数 
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
            this.liverData()
        },
        handleChange(value) {
            // this.getfourteenSessions()
            console.log(this.inputName)
            console.log(value)
        },
        changeMatch(e){
            this.matchName = e
        },
        createChat(e){
            console.log(e)
            socket.send(JSON.stringify({ command: 'create', roomId: e.roomId, uid: e.user_id }));
        },
        getMatchList(){
            matchesLiveList({
                limit:50,
                page:1,
                sf_pt:2
                }).then(res => {
                    this.matchData = res.data.list
            })
        },
        changeTap(e){
            console.log(e)
            // this.changeID  = e.id
            this.changDialog = true
            this.k_id = e.user_id
            this.roomId = e.roomId
            // startLive({
            //     user_id:this.nickname,
            //     type:this.matchName.type,
            //     relevance_matches:this.matchName.match_id
            //     }).then(res => {
            //         console.log(res)
            //         // this.liverData()
            // })
        },
        clickConfirm1() {
            this.changDialog = false
            socket.send(JSON.stringify({ command: 'create', roomId: this.roomId, uid: this.k_id }));
            startLive({
                user_id:this.k_id,
                type:this.matchName.type,
                relevance_matches:this.matchName.match_id
                }).then(res => {
                    console.log(res)
                    // res.push_url
                    this.$alert(`${res.data.push_url}`, '推流地址', {
                        confirmButtonText: '确定',
                        callback: action => {
                        this.$message({
                        type: 'info',
                        message: `action: ${ action }`
                        });
                    }
                });
                    this.liverData()
            })
            // changSave({
            //         live_name:this.titleName,
            //         live_image:this.dialogImageUrl,
            //         id:this.changeID,
            //         author_name:this.aName
            //     }).then(res => {
            //         console.log(res)
            //         this.liverData()
            //     })
        },
        deleteImg(){
            this.dialogImageUrl = ''
        },
        handleAvatarSuccess(res, file) {
        this.dialogImageUrl = res.data.url
      },
        handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
        closeTap(row){
            console.log(row)
            if(row.status==1){
                closeLive({
                    user_id:row.user_id
                }).then(res => {
                    console.log(res)
            })
            }else{
                this.$message('暂未开播');
            }
        },
        cancaelTap(row){
            console.log(row)
            this.$confirm('是否取消该用户直播权限?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            cancelLive({
                    id:row.id
                }).then(res => {
                    console.log(res)
                    this.liverData()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        clickHis(row){
            this.hisTrue  = true
            console.log(row)
            historyLive({
                user_id:row.user_id
            }).then(res => {
                console.log(res)
                this.userData = res.data.data
            })
        },
        // 获取用户列表
        getUserList() {
            userList({
                page: this.currentPage,
                limit: this.PageSize,
                mobile:this.phoneNumber
            }).then(res => {
                for(let i=0;i<res.data.list.length;i++){
                    if(res.data.list[i].status=='1'){
                        this.tableUser.push(res.data.list[i])
                    }
                }
                console.log(this.tableUser)
            })
        },
        phoneNum(){
            if(this.phoneNumber.length=='11'){
                this.getUserList()
            }
        },
        changeType(){
            console.log(this.status)
        },
        handleSelectionChange(e){
            this.zid = e
        },
        clickConfirm() {
            this.dialogTableVisible = false
            addLive({
                    user_id:this.inputName,
                    // live_name:this.titleName,
                    // live_image:this.dialogImageUrl
                }).then(res => {
                    console.log(res)
                    this.liverData()
                })
        },
        clickDelete1(){
            this.changDialog = false
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        handleButtonAdd(){
            this.dialogTableVisible = true
        },
        getExpertList() {
            expertList({
                page: 1,
                limit: 100
            }).then(res => {
                console.log(res)
                this.platformList = res.data.list
            })
        },
        liverData(e){
            getLiverList({
                page: this.currentPage,
                limit: this.PageSize,
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
                this.totalCount = res.data.total
            })
        },
        handleRadioChange(){
            if(this.typeStatus==1){
                cancelLive({
                    id:this.tableUser[0].id
                }).then(res => {
                    console.log(res)
                    this.liverData()
                })
            }else{
                addLive({
                    user_id:this.inputName
                }).then(res => {
                    console.log(res)
                    this.liverData()
                })
            }
        }
    }
}
</script>

<style scoped>
/* .el-message-box .msgbox {
  width: 700px;
} */
/* /deep/ .el-button {
  background-color: red;
}
/deep/ .el-message-box */
/* ::v-deep(.el-message-box){
    width: 700px;
} */
::v-deep .el-message-box{
    width: 700px !important;
}
</style>